<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-05-31 16:30:42
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-09-14 14:29:35
 * @FilePath: /smart-web-app/components/footer.vue
 * @Description: 
-->
<template>
  <footer class="footer-box">
    <div class="container">
      <div class="footer-list">
        <!-- <div class="footer-item">
          <h3>{{ info.children?.[0]?.title ?? "" }}</h3>
          <ul v-if="info?.children?.[0]?.children">
            <li v-for="item in info.children[0].children" :key="item.id">
              <img :src="item.images[0]" alt="" class="link-img" />
            </li>
          </ul>
        </div> -->
        <div class="footer-item">
          <h3>{{ info.children?.[1]?.title ?? "" }}</h3>
          <ul v-if="info?.children?.[1]?.children">
            <li v-for="item in info.children[1].children" :key="item.id">
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="footer-item">
          <h3>{{ info.children?.[2]?.title ?? "" }}</h3>
          <img
            :src="info.children?.[2]?.images?.[0]"
            alt=""
            v-if="info.children?.[2]?.images?.[0]"
          />
          <img src="~/assets/image/03.jpg" alt="" v-else />
        </div>
      </div>
      <div class="contact-box">
        <input
          type="text"
          :placeholder="$t('footer.name')"
          class="name-input"
        />
        <input
          type="text"
          :placeholder="$t('footer.address')"
          class="address-input"
        />
        <div class="send-button">{{ $t("footer.send") }}</div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
const { locale } = useI18n();
const { data } = <any>await useGetFetch(`/t/70`, { lang: locale.value });
const { info } = useContentInfo(data.value.result);
</script>
<style scoped lang="scss">
.footer-box {
  padding: 20px 0;
  background-color: #1d1135;
  position: sticky;
  top: 0;
  ul,
  li {
    list-style: none;
  }
  .container {
    .footer-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #fff;
      .footer-item {
        h3 {
          margin-bottom: 20px;
        }
        ul {
          li {
            font-size: 14px;
          }
          li + li {
            margin-top: 10px;
          }
        }
        img {
          height: 100px;
          width: 100px;
        }
        .link-img {
          height: 40px;
          cursor: pointer;
        }
      }
    }
    .contact-box {
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        background: none;
        border: none;
        outline: none;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.2);
        margin-right: 5px;
        padding: 0 10px;
        box-sizing: border-box;
        color: #fff;
        &:nth-child(1) {
          width: 100px;
        }
        &:nth-child(2) {
          width: 300px;
        }
      }
      .send-button {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $primary;
        padding: 0 30px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
